<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="static/css/register.css">
	<link rel="stylesheet" href="static/css/bootstrap.css">
	<script src="static/js/bootstrap.min.js"></script>
  <script src="/static/js/jquery.js"></script>
	<style>
		#main{
			width: 350px;
			margin-top: 120px;
		}
		input{
			margin-bottom: 6px;
		}
		.checkbox{
			margin-left: 20px;
		}
		body{
			width: 968px;
			margin-left: auto;
			margin-right: auto;
			background-image: url(static/images/background.jpg);
			background-repeat:no-repeat;
  			background-size:cover;
		}
    .mark {
			display: none;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
			height: 100px;
			line-height: 100px;
			width: 400px;
			text-align: center;
			font-size: 20px;
			color: #fff;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 0.1rem;
		}
	</style>
</head>
<body>
	<div class="container" id="main">
		<form class="form-signin">
			<h2 class="form-signin-heading">签订合约</h2>
      <p><span style="margin-right: 10px">房东姓名：</span><input type="text" class="form-control" placeholder="请输入房东姓名" name="lname" id="lname" value="{{ landlord.uname }}" style="width: 65%; display: inline-block"></p>
      <p><span style="margin-right: 50px">租金:</span><input type="text" class="form-control" placeholder="请输入租金(单位元)" name="price" id="price" value="{{house.price}}" style="width: 65%; display: inline-block"></p>
      <p><span style="margin-right: 36px">有效期:</span><input type="text" class="form-control" placeholder="请输入有效期" name="valid" id="valid" style="width: 65%; display: inline-block"></p>
			<p><span style="margin-right: 10px">房东手机号:</span><input type="text" class="form-control" placeholder="房东手机号" name="lphone" id="lphone" value="{{landlord.uphone}}"  style="width: 65%; display: inline-block"></p>
      <p><span style="margin-right: 25px">租客姓名:</span><input type="text"  maxlength="11" class="form-control" placeholder="请输入租客姓名" name="tname" id="tname" style="width: 65%; display: inline-block"></p>
			<p><span style="margin-right: 10px">租客手机号:</span><input type="text"  maxlength="11" class="form-control" placeholder="租客手机号" name="tphone" id="tphone" style="width: 65%; display: inline-block"></p>
			<button class="btn btn-lg btn-primary btn-block" type="button" id="registerBtn">签订合同</button>
		</form>
	</div>
</body>
</html>

<script>
  function myalert(str) {
		let div = '<div class="mark"></div>';
		$('body').append(div);
		$('.mark').html(str);
		$('.mark').show();
		setTimeout(function() {
			$('.mark').hide();
			$('.mark').remove();
		}, 6000)}
  $('#registerBtn').click(function () {
      const lname = $('#lname').val();
      const price = $('#price').val();
      const valid = $('#valid').val();
      const tname = $('#tname').val();
      const lphone = $('#lphone').val();
      const tphone = $('#tphone').val();
      $.ajax({
          url: 'generate_contract',
          data: {'lname': lname, 'price':price, 'valid': valid, 'tname': tname, 'lphone': lphone, 'tphone': tphone},
          success: function (response) {
            if(response.code === 1){
                myalert(response.message);
                setTimeout(function () {
                    window.location.href = '/'
                }, 6000)

            }
          },
          dataType: 'json'
      })
  })
</script>
